<script setup lang="ts">
import type { OrderType } from '@/enums'
import { OrderType as OrderTypeObj } from '@/enums'

import { consult } from '../composable/user-consult'

const { cancelLoading, deleteLoading } = consult()

import { viewPrescription } from '@/composable'

const { viewLoading, onShowPrescription } = viewPrescription()

defineProps<{
  status: OrderType
  prescriptionId?: string
}>()

const emit = defineEmits<{
  (e: 'cancel'): void
  (e: 'to-pay'): void
  (e: 'delete'): void
  (e: 'to-room'): void
}>()
</script>

<template>
  <!-- 待支付 -->
  <div class="foot" v-if="status === OrderTypeObj.ConsultPay">
    <van-button
      class="gray"
      plain
      size="small"
      round
      @click="emit('cancel')"
      :loading="cancelLoading"
    >
      取消问诊
    </van-button>

    <van-button
      type="primary"
      plain
      size="small"
      round
      @click="$emit('to-pay')"
    >
      去支付
    </van-button>
  </div>

  <!-- 待接诊 -->
  <div class="foot" v-if="status === OrderTypeObj.ConsultWait">
    <van-button
      class="gray"
      plain
      size="small"
      round
      @click="emit('cancel')"
      :loading="cancelLoading"
    >
      取消问诊
    </van-button>

    <van-button
      type="primary"
      plain
      size="small"
      round
      @click="$emit('to-room')"
    >
      继续沟通
    </van-button>
  </div>

  <!-- 问诊中 -->
  <div class="foot" v-if="status === OrderTypeObj.ConsultChat">
    <van-button
      v-if="prescriptionId"
      class="gray"
      plain
      size="small"
      round
      @click="() => onShowPrescription(prescriptionId!)"
      :loading="viewLoading"
    >
      查看处方
    </van-button>

    <van-button
      type="primary"
      plain
      size="small"
      round
      @click="$emit('to-room')"
    >
      继续沟通
    </van-button>
  </div>

  <!-- 问诊完成 -->
  <div class="foot" v-if="status === OrderTypeObj.ConsultComplete">
    <van-button
      class="gray"
      plain
      size="small"
      round
      @click="emit('to-room')"
      :loading="cancelLoading"
    >
      问诊记录
    </van-button>

    <van-button
      type="primary"
      plain
      size="small"
      round
      @click="$emit('to-room')"
    >
      去评价
    </van-button>
  </div>

  <!-- 已取消 -->
  <div class="foot" v-if="status === OrderTypeObj.ConsultCancel">
    <van-button
      class="gray"
      plain
      size="small"
      round
      @click="emit('delete')"
      :loading="deleteLoading"
    >
      删除订单
    </van-button>

    <van-button
      type="primary"
      plain
      size="small"
      round
      @click="$router.push('/home')"
    >
      咨询其他医生
    </van-button>
  </div>
</template>

<style scoped lang="scss">
.foot {
  padding: 0 15px 15px 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .van-button {
    margin-left: 10px;
    padding: 0 16px;
    &.gray {
      color: var(--cp-text3);
      background-color: var(--cp-bg);
    }
  }
  .more {
    color: var(--cp-tag);
    flex: 1;
    font-size: 13px;
  }
}
</style>
